<template>
  <el-dialog
    :visible.sync="showUnbinding"
    :close-on-click-modal="modalDialog"
    top="20vh !important"
    :close-on-press-escape="modalDialog"
    width="900px"
  >
    <div slot="title">
      <span>{{ translate("jb") }}</span>
      <span class="primaryColor ml10 underline pointer" @click="releRecord">{{
        translate("releRecord")
      }}</span>
    </div>
    <div class="df_ac">
      <div>
        <span class="key">{{ translate("braceletInfo") }}：</span>
        <span class="value">{{ param.braceletId }}</span>
      </div>
      <div>
        <span class="key">{{ translate("pjmc") }}：</span>
        <span class="value">{{ param.name || param.billName || "" }}</span>
      </div>
      <div>
        <span class="key">{{
          param.userType === "0" ? translate("hyxm") :translate("skxm")
        }}：</span>
        <span class="value">{{ param.userName }}</span>
      </div>
      <div>
        <span class="key">{{
          param.userType === "0" ? translate("hysjh") : translate("sksjh")
        }}：</span>
        <span class="value">{{ param.phone || "-" }}</span>
      </div>
      <div v-if="param.number">
        <span class="key">{{ translate("memberIdCard") }}：</span>
        <span class="value">{{ param.number || "-" }}</span>
      </div>
      <div>
        <span class="key">{{ translate("shyj") }}：</span>
        <span class="value">{{ param.realDeposit }}</span>
      </div>
      <div>
        <span class="key">{{ translate("yjzffs") }}：</span>
        <span class="value">{{ param.payMethod }}</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="gjCnt">
        <span>{{ translate("styj") }}：</span>
        <el-input
          v-model="modPValue"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          :placeholder="translate('qsr')"
        />
      </div>
      <el-button @click="showUnbinding = false">{{
        translate("cancel")
      }}</el-button>
      <el-button
        v-preventReClick
        :loading="subLoading"
        type="primary"
        @click="onSubmit"
      >{{ translate("qd") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { partialRefundBraceletOrder, printOrder } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showUnbinding: false,
      subLoading: false,
      param: {},
      modPValue: ''
    }
  },
  methods: {
    show(e) {
      this.showUnbinding = true
      this.param = e || {}
      this.modPValue = e.realDeposit || '0'
    },
    releRecord() {
      this.showUnbinding = false
      this.$router.replace(`/vipList/associationList`)
    },
    print(workId) {
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem('venueId'),
          workId,
          templateCode: 'BRACELET_REFUND_TPML'
        }
      })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onSubmit() {
      const that = this
      const param = that.param
      if (!this.modPValue || (this.modPValue === '0' && Number(param.realDeposit) > 0)) {
        return this.$message.info(this.translate('qsrstyj'))
      } else {
        if (this.modPValue > param.realDeposit) {
          return this.$message.info(this.translate('styjPlace'))
        }
      }
      this.subLoading = true
      partialRefundBraceletOrder({ param: { id: param.id, money: Number(this.modPValue) }}).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('jbcg'))
        this.showUnbinding = false
        if (res.record) {
          this.print(res.record)
        }
        this.$emit('success')
      }, () => {
        this.subLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.df_ac {
  flex-wrap: wrap;
  border-bottom: 1px solid #dfe2e8;
  div {
    margin-bottom: 20px;
    width: 100%;
    .key {
      color: #666666;
      display: inline-block;
      // width: 7em;
      // text-align: right;
    }
    .value {
      color: #222;
    }
  }
}
::v-deep .el-dialog__body {
  padding-bottom: 10px !important;
}
.gjCnt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  float: left;
  span {
    width: 7em;
    text-align: right;
  }

  .el-input {
    width: 150px;
    margin: 0 5px;
  }
}
</style>
